<template>
  <!-- 一.写login背面静态  注意把login文件导入index.js里同时创建实例化路由-->
  <div class="login">
    <div class="left">
      <!-- 标题栏 -->
      <div class="header">
        <img class="t1" src="@/assets/img/login_logo.png" alt />
        <span class="t2">黑马面面</span>
        <div class="t3"></div>
        <div class="t4">用户登录</div>
      </div>

      <!-- form表单 
      el-form
        model:数据绑定(对象)
        label-width:标题宽度
        el-form-item label:标题名

        el-input v-model prefix-icon:图标名(来自于element的icon) show-password:true:密码模式 false:普通模式

        el-row:行 el-col :span="栏数(一行24栏)"
        
        el-checkbox v-model:双向绑定 label:选中该项后的值
        v-model:双向绑定 它的值是数组 label就可以使用 选中该项后它的值会push(label的值)
          它的值不是数组 label就无效 选中该项后它的值为true 取消就是false
          el-link type="primary"
          el-button type="primary"   type   
      -->
      <!-- form表单 -->
      <!-- label-width="0px 宽度显示一致 -->
      <el-form
        class="form"
        :model="form"
        :rules="rules" 
        ref="form"
        label-width="0px"
      >
      <!-- 在<el-form-item>绑定prop:验证项的字段名 -->
        <el-form-item prop="phone">
          <!-- v-model="form.phone"可以输入内容 -->
          <el-input
            placeholder="请输入手机号"
            v-model="form.phone"
            prefix-icon="el-icon-user"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!-- :show-password="true"也可以简写成:show-password -->
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            :show-password="true"
            prefix-icon="el-icon-lock"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="form.code"
                placeholder="请输入验证码"
                prefix-icon="el-icon-key"
              >
              </el-input>
            </el-col>
            <el-col :span="6">
              <!-- /* 第四天:2找到验证码的img标签,src绑定相应的codeUrl,绑定了一个点击事件 -->
              <img class="code-img" @click="refreshCode" :src="codeUrl" alt="" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="isPass"> 
          <el-checkbox v-model="form.isPass" :label="true">
            <!-- /ˈpraɪməri/  -->
            我已阅读并同意 <el-link type="primary">用户协议</el-link>和
            <el-link type="primary">隐私条款</el-link>
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn_Login" @click="login"> 登录</el-button>
        </el-form-item>
        <el-form-item>
                                                      <!--注册点击事件  -->
          <el-button type="primary" class="btn" @click="showRegister"> 注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <img src="@/assets/img/login_banner_ele.png" alt />
    <!-- 3挂载子组建当标签使用 -->
    <register ref="register"> </register>
    
  </div>
</template>

<script>
/* <!-- 组件套用组件:1.导入  2主册 3.当标签使用 --> */
/* 第四天,6 导入登录API方法 */
import {toLogin} from '@/api/login.js'
import register from './register'
/* 第四天:11 导入刚封装在local.js里的存储token方法*/
import {saveLocal,getLocal}  from '@/utils/local.js'


export default {
  components:{
      register
  },
  /* 第四天:data中的变量不能相互使用 */
  data () {
    return {
      /* 第四天:1定义一个coderl:验证码地址 */
      codeUrl:process.env.VUE_APP_URL+'/captcha?type=login',
      form: {
        phone: '',
        password: '',
        code: '',
        isPass:[],
      },
      /* 验证规则 */
      rules:{
          phone:[
            /* required必填实际是非空验证 " " [] undefined */
            {required:true,message:'请输入手机号',trigger:'change'},
            /* 第四天:4,给手机输入框设置validator自定义判断,正则判断 */
            {
              validator:(rule,value,callback)=>{
                const _reg=/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                /* 第四天4.1 if判断用户输入手机是不是符合正则,符合则正常登录,不符合则显示错误 */
                /* 第四天 5,到login.js里定义一个登录API */
                if(_reg.test(value)){
                  callback()
                }else{
                  callback(new Error('请正确输入手机号'))
                }
              },
              trigger:'change'
            }
          ],//是 string 手机号
        password:[
          {required:true,message:'请输入密码',trigger:'change'},
          {min:6,max:12,message:'请输入6-12位密码',trigger:'change'}
        ],
        code:[
          {required:true,message:'请输入验证码',trigger:'change'},
          {min:4,max:4,message:'请输入正确验证码'},
        ],//是 string 手机号
        isPass:[
          {required:true,message:'请勾选协议',trigger:'change'}
        ]
      }
    }
  },
  /* 第四天:17进入页面判断 有token就跳转至layout ,上面需要导入组件*/
  created(){
      // if(已登录(有token)){
      //   跳转至layout  this.$router.push("/layout")
      // }
      if(getLocal('token')){
          this.$router.push('/layout')
      }
  },
  methods: {
    /* success 和error是elment风装好的弹窗,可以直接用 */
    /* 登录 */
    login(){
      this.$refs.form.validate(result=>{
          if(result){
            /* 第四天7.在表单验证成功后调用登录api方法 并在方法成功反回信息时提示登录成功*/
            toLogin(this.form).then(res=>{
              this.$message.success('登陆成功')
              /* 第四天:12  A.cookie主动参与接口请求,容易让别人拿到,B.它没有相应方法,都得自已封装*/
              /* 第四天:12,以前写法:window.localStorage.setItem('token',res.data.data.token),现在可直接封装saveLocal后调用 */
              saveLocal('token',res.data.data.token)
              /* 第四天:15登录成功后跳转至该路由 */
              this.$router.push('/layout')
              window.console.log('登陆返回信息:',res)
            })           
          }else{
            this.$message.error('验证失败')
          }
      })
    },
    showRegister(){
      /* 2.主册 */
      /* 父传子 1.在子组件标签定义一个ref 2.获取子组件this===this.$refs.ref值*/
      this.$refs.register.isShow=true 
    },
    /* 第四天:3在点击事件中修改url地址(在以前的url地址后面加一个时间戳) */
    refreshCode(){
      this.codeUrl=
      process.env.VUE_APP_URL+'/captcha?type=login&dfhdfh='+Date.now()
    }
  },

}
</script>

<style lang="less">
/* 1.到App.vue导入less样式 */
.login {
  height: 100%;
  background: linear-gradient(#1493fa 28%, #01c6fa 96%);
  display: flex;
  /* 上下剧中 */
  align-items: center;
  justify-content: space-around;
}
.left {
  /* 左边盒子 */
  width: 478px;
  height: 550px;
  background: #f5f5f5;
  padding: 44px 42px;
  .code-img {
    width: 100px;
    height: 40px;
  }
  .btn_Login,
  .btn {
    width: 394px;
    height: 40px;
    margin-top: 20px;
  }
}
.header {
  display: flex;
  /* 上下剧中 */
  align-items: center;
  margin-bottom: 20px;

  .t1 {
    width: 25px;
  }
  .t2 {
    font-size: 24px;
    font-family: SourceHanSansCN Regular, SourceHanSansCN Regular-Regular;
    font-weight: 400;
    text-align: left;
    color: #0c0c0c;
    margin-left: 13px;
    margin-right: 13px;
  }
  .t3 {
    width: 1px;
    height: 28px;
    background: #c7c7c7;
    margin-right: 13px;
  }
  .t4 {
    font-size: 22px;
    font-family: PingFangSC Regular, PingFangSC Regular-Regular;
    font-weight: 400;
    text-align: left;
    color: #0c0c0c;
  }
}
</style>
